<template>
	<view class='richeng'>
		<view class='rili'>
			<view class='rili-top'>
				<view class='yue'>
					<img src="/static/imgs/richeng/zuo.png" alt="">
					<span class='ml30 byue'>{{currmonth}}月</span>
					<span class='ml20'>{{curryear}}</span>
					<img src="/static/imgs/richeng/you.png" alt="" class='ml30'>
				</view>
				<view class="zhouyue">
					<view class="zy disfac" :class="{active:iszhou}" @click="changezy('z')">
						<span>周</span>
					</view>
					<view class="zy disfac" :class="{active:!iszhou}" @click="changezy('y')">
						<span>月</span>
					</view>
				</view>
			</view>
			<view class="rili-bottom">
				<view class="riqi">
					<swiper class="swiper"  circular="true" :current="swiperCurrent" @change="dateSwiperChange" >
						<swiper-item v-for="(it,idx) in zhoulist" :key="idx">
							<view class="swiper-item uni-bg-red">
								<view class="zhou-ri" v-for="(item,index) in it" :key="index">
									<span>{{item.zhou}}</span>
									<view class="zhou-rq disfac" :class="{dangri:item.istoday,chosen:chosenday}" @click="chosenday = item.riqi">
										<span>{{item.istoday ? '今' : item.riqi}}</span>
									</view>
									<view class="dian" v-if="item.hasricheng">
										
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iszhou:true,
				currmonth:'',
				curryear:'',
				swiperCurrent:3,
				chosenday:'',
				zhoulist:[]
			}
		},
		mounted () {
			this.curryear = new Date().getFullYear()
			this.currmonth = new Date().getMonth()+1
			this.getsevenweeks() //刚进组件 就先获取当前日期的左右7周的数据  当前周在中间
		},
		onLoad() {
			
		},
		methods: {
			getsevenweeks(){
				var that = this
				for(var i = -3;i<4;i++){
					that.zhoulist.push(that.getweeklist(that.DateAddDay(new Date(),(i*7))))
				}
			},
			getweeklist(day){
				var currzhou = [] //当前周
				switch(day.getDay()) {
					case 1:
						var week = 1;
						break;
					case 2:
						var week = 2;
						break;
					case 3:
						var week = 3;
						break;
					case 4:
						var week = 4;
						break;
					case 5:
						var week = 5;
						break;
					case 6:
						var week = 6;
						break;
					case 0:
						var week = 0;
						break;
				}
				var fulist = []
				for(var i = 0; i<(8-week);i++){  //当前日期以及后面几天
					var houdd = this.DateAddDay(day,i)
					var obj = {
						zhou:this.getweek(houdd),
						riqi:houdd.getDate()
					}
					if(this.formatTime(houdd,'-') == this.formatTime(new Date(),'-') ){
						obj.istoday = true
					}
					fulist.push(obj)
				}
				for(var i = -1; i>(1-week);i--){ //当前日期的前面几天
					var qiandd = this.DateAddDay(day,i)
					fulist.unshift({
						zhou:this.getweek(qiandd),
						riqi:qiandd.getDate()
					})
				}
				console.log(fulist)
				return fulist
			},
			//获取多少天后的日期   d为当前天   days为多少天后 
			DateAddDay(d, days) {
				var d = new Date(d);
				return new Date(d.setDate(d.getDate() + days));
			},
			getweek(d){
				var week = ''
				switch(d.getDay()) {
					case 1:
						week = '周一'
						break;
					case 2:
						week = '周二'
						break;
					case 3:
						week = '周三'
						break;
					case 4:
						week = '周四'
						break;
					case 5:
						week = '周五'
						break;
					case 6:
						week = '周六'
						break;
					case 0:
						week = '周日'
						break;
				}
				return week
			},
			// 时间格式转换 yyyy/mm/dd
			formatTime(date,str) {
			  var year = date.getFullYear()
			  var month = date.getMonth() + 1
			  var day = date.getDate()
			  var hour = date.getHours()
			  var minute = date.getMinutes()
			  var second = date.getSeconds()
			  return year + str + this.formatNumber(month) + str + this.formatNumber(day)
			},
			// 两位数以内的数字自动补零
			formatNumber(n) {
			  n = n.toString()
			  return n[1] ? n : '0' + n
			}, 
			dateSwiperChange(e){
				var that = this
				const lastIndex = that.swiperCurrent // 当前的index
				const currindex = e.detail.current
				
				if(currindex > lastIndex){ //右滑
					if(currindex == that.zhoulist.length - 1){
						that.zhoulist[currindex]
					}
				}
				that.swiperCurrent = currindex

			},
			//周月的切换
			changezy(name){
				
				if(name == 'z'){
					this.iszhou = true
				}else{
					this.iszhou = false
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.disfac{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rili{
		height: 260rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		.rili-bottom{
			height: calc(100% - 42rpx);
			margin-top: 10rpx;
			.riqi{
				height: 100%;
				width: 100%;
				.swiper{
					height: 100% !important;
					width: 100% !important;
				}
				.swiper-item{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.zhou-ri{
						height: 100%;
						width: 14%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						position: relative;
						.zhou-rq{
							height: 50rpx;
							width: 50rpx;
							border-radius: 50%;
							margin-top: 16rpx;
							margin-bottom: 16rpx;
						}
						.zhou-rq:hover{
							background-color: #dcedfd !important;
							color: #4e96f0 !important;
						}
						.dangri{
							background-color: #2b8ff7;
							color: #fff;
						}
						.dian{
							height: 10rpx;
							width: 10rpx;
							background-color: #8994a9;
							position: absolute;
							bottom: 6rpx;
						}
					}
				}
			}
		}
		.rili-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.yue{
				display: flex;
				align-items: center;
				img{
					height: 30rpx;
					width: 18rpx;
				}
				.ml30{
					margin-left: 30rpx;
				}
				.ml20{
					margin-left: 20rpx;
				}
				.byue{
					color: #4e96f0;
					font-size: 40rpx;
				}
			}
			.zhouyue{
				display: flex;
				align-items: center;
				.zy{
					width: 80rpx;
					height: 50rpx;
					border-radius: 10rpx;
					text-align: center;
					border: 1px solid #e1e1e1;
				}
				.active{
					color: #4e96f0;
					border: 1px solid #4e96f0;
				}
			}
		}
	}
</style>